<template>
  <div class="book-detail-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="box m-b-20">
        <user-tab-list :list="tablist"></user-tab-list>
        <Spin :withIcon="true" v-if="loading" text="邮箱认证中"></Spin>
        <div class="flx-col-s-c main-area" v-if="result != null && result">
          <div class="flx-col-s-c" style="margin-bottom: 40px">
            <div class="icon icon-s"></div>
            <span class="pub-font-32 f-w-600 black">恭喜您，邮箱认证成功</span>
          </div>
          <div class="flx-row-s-c">
            <span class="f-14 c-black">认证邮箱: {{ email }}</span>
            <a
              href="/user/emailc"
              class="b-form-font-button"
              style="margin-left: 33px"
              >查看</a
            >
          </div>
        </div>
        <div class="flx-col-s-c main-area" v-if="result != null && !result">
          <div class="flx-col-s-c" style="margin-bottom: 40px">
            <div class="icon icon-f"></div>
            <span class="pub-font-32 f-w-600 c-black pub-m-t-40"
              >邮箱认证失败</span
            >
          </div>
          <div class="flx-row-s-c" style="margin-bottom: 15px" v-if="email">
            <span class="f-14 c-black">认证邮箱: {{ email }}</span>
            <span
              class="b-form-font-button"
              style="margin-left: 33px"
              @click="resend(email)"
              >重新发送认证邮箱</span
            >
          </div>
          <span class="c-black f-14">{{ reason }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkEmailKey, submitCertificatesEmail } from "@/api/user";

export default {
  name: "VipEmailC",
  components: {
    breadCrumb: () => import("_c/breadCrumb/breadCrumb.vue"),
    userTabList: () => import("_c/tabList/userTabList.vue"),
  },
  data() {
    return {
      loading: true,
      breadCrumb: [{ name: "邮箱认证", to: "/password/emailc" }],
      tablist: [
        {
          name: "邮箱认证",
        },
      ],
      result: null,
      reason: "",
      email: "",
    };
  },
  created() {
    this.check();
  },
  methods: {
    async check() {
      let key = this.$route.query.key;
      if (!key) {
        this.result = false;
        this.email = "";
        this.reason = "验证凭证不存在，请重试！";
        this.loading = false;
        return;
      }
      let params = {
        key: key,
      };
      let res = await checkEmailKey(params);
      if (res.code == 200) {
        this.result = true;
        this.email = res.data.email;
      } else {
        this.result = false;
        this.email = res.data.email;
        this.reason = res.data;
      }
      this.loading = false;
    },
    // 重发邮箱验证
    resend(email) {
      this.$Modal.confirm({
        title: "重发确认",
        content: "<p>确定重新发送认证邮件到</p><p>" + email + "？</p>",
        loading: true,
        onOk: async () => {
          let params = {
            email: email,
          };
          let res = await submitCertificatesEmail(params);
          if (res.code == 200) {
            this.$Message.success("认证邮箱已发送，请注意查收！");
          }
          this.$Modal.remove();
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.book-detail-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .box {
    padding: 30px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    margin-bottom: 15px;
    position: relative;
    min-height: 700px;

    .main-area {
      padding-top: 150px;

      .icon {
        @include size(110px);
        @include bg-setting();

        &.icon-s {
          background-image: url("~@/assets/images/pay-success@2x.png");
        }
        &.icon-f {
          background-image: url("~@/assets/images/pay-fail@2x.png");
        }
      }
    }
  }
}
</style>